<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好友界面</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="parent">
        <div class="left">
            <div class="titleList">
                <img src="image/头像.jpg" class="pg">
                <span class="username">1234124124</span>
            </div>
            <ul class="chatList">
                <!-- <li class="touser">
                    <img src="image/头像.jpg" class="pg">
                    <div class="information">
                        <span class="tousername">1233</span>
                        <span class="preview">dmwlfmwfmw</span>
                    </div>
                </li> -->
            </ul>
        </div>
        <div class="right">
            <!-- <div class="touserName"><span>1233123213</span></div>
            <div class="MessageList">
                <div class="tous">
                    <img src="image/头像.jpg" class="pg">
                    <div class="sendMes">123</div>
                </div>
                <div class="fromus">
                    <img src="image/头像.jpg" class="pg">
                    <div class="sendMes">123</div>
                </div>
            </div>
            <div class="inputList">
                <textarea oninput="updateNum()" maxlength="100" id="textareaContent"></textarea>
                <div class="commentText">
                    <div class="textLine">还能输入<em>100</em>个字符</div>
                    <button class="sendComment">发送</button>
                </div>     
            </div> -->
        </div>
    </div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script>
    function updateNum() {
        let text = $("#textareaContent").val();
        $("em").html(100-text.length);
    }




    let websocketUrl = 'ws://'+ location.host +'/intoChat';
    let websocket = new WebSocket(websocketUrl);


    websocket.onopen = function() {
        console.log("房间链接成功!");
    }
    websocket.onclose = function() {
        console.log("房间断开链接");
    }
    websocket.onerror = function() {
        console.log("房间出现异常");
    }
    window.onbeforeunload = function() {
        websocket.close();
    }
    websocket.onmessage = function(e) {
        console.log(e.data);
        let resp = JSON.parse(e.data);
        if(resp.status == -1) {
            alert(resp.message);
            location.assign("login.html");
            return;
        }else{
            if(resp.message == "getUser"){
                let username = document.querySelector('.username');
                username.innerHTML = resp.fromusername;
                createList(resp.users);
            }
            if(resp.message == "loadMessage") {
                createChatList(resp);
            }
            if(resp.message == "sendMessage") {
                let MessageList = document.querySelector('.MessageList');
                for(let message of resp.messages) {
                    if(message.isSender){
                        let fromus = document.createElement('div');
                        fromus.className = 'fromus';
                        let img = document.createElement('img');
                        img.src='image/头像.jpg';
                        img.className = 'pg';
                        let sendMes = document.createElement('div');
                        sendMes.className = 'sendMes';
                        sendMes.innerHTML = message.message;
                        fromus.appendChild(img);
                        fromus.appendChild(sendMes);
                        MessageList.appendChild(fromus);
                    }else{
                        let tous = document.createElement('div');
                        tous.className = 'tous';
                        let img = document.createElement('img');
                        img.src='image/头像.jpg';
                        img.className = 'pg';
                        let sendMes = document.createElement('div');
                        sendMes.className = 'sendMes';
                        sendMes.innerHTML = message.message;
                        tous.appendChild(img);
                        tous.appendChild(sendMes);
                        MessageList.appendChild(tous);
                    }
                }
            }
        }
    }

    function createChatList(resp){
        let messages = resp.messages;
        let tousername = resp.tousername;
        let s = "";
        s += "<div class='touserName'><span>"+tousername+"</span></div>";
        s += "<div class='MessageList'>";
        if(messages != null) {
            for(let message of messages) {
                if(message.isSender){
                    s+="<div class='fromus'>";
                    s+="<img src='image/头像.jpg' class='pg'>"
                    s+="<div class='sendMes'>"+message.message+"</div>"
                    s+="</div>";
                }else{
                    s+="<div class='tous'>";
                    s+="<img src='image/头像.jpg' class='pg'>"
                    s+="<div class='sendMes'>"+message.message+"</div>";
                    s+="</div>";
                }
            }
        }
        s += "</div>";
        s += "<div class='inputList'>"
        s += "<textarea oninput='updateNum()' maxlength='100' id='textareaContent'></textarea>";
        s += "<div class='commentText'>"
        s += "<div class='textLine'>还能输入<em>100</em>个字符</div>"
        s += "<button class='sendComment' onclick=btnOn('"+tousername+"')>发送</button>";
        s += "</div></div>";
        $('.right').html(s);
    }

    function createList(users) {
        let s = "";
        for(let user of users) {
            s += "<li class='touser' onclick=Chat('"+user.username+"')>";
            s += "<img src='image/头像.jpg' class='pg'>";
            s += "<div class='information'>";
            s += "<span class='tousername'>"+user.username+"</span>";
            s += "<span class='preview'></span></div></li>"
        }
        $('.chatList').html(s);
    }

    function Chat(s) {
        let username = document.querySelector('.username');
        let req = {
            from: username.textContent,
            to: s,
            message: "loadMessage",
        }

        websocket.send(JSON.stringify(req));
    }

    function btnOn(tousername) {
        let username = document.querySelector('.username');
        let text = $("#textareaContent").val().trim();
        if(text == ""){
            alert("请输入内容,不要输入空格");
            return;
        }
        let req = {
            from : username.textContent,
            to: tousername,
            content: text,
            message: "sendMessage",
        }
        websocket.send(JSON.stringify(req));
        let text2 = document.querySelector("#textareaContent");
        text2.value = "";
    }

</script>